<template>
  <div ref="imageWrapper">
    <a-card title="查询区域" class="search">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="onSearch">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="账套/核算单元" prop="accName">
                <a-input v-model="queryParam.accName" readOnly placeholder="请选择" @click.native="openOrganModel" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="审计时间" prop="arrayTime">
                <a-range-picker
                  v-model="queryParam.arrayTime"
                  format="yyyy-MM-DD"
                  value-format="yyyy-MM-DD"
                  @change="handleDatechange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="4" :sm="8">
              <a-form-model-item label="" prop="direction">
                <a-radio-group name="radioGroup" v-model="queryParam.direction">
                  <a-radio :value="0">全部</a-radio>
                  <a-radio :value="1">借款</a-radio>
                  <a-radio :value="2">贷款</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :md="2" :sm="6">
              <a-button
                type="primary"
                style="margin-left: 10px; background-color: #000e89; border: 1px solid #000e89"
                @click="ShowItemOfIndicator"
                >指标筛选</a-button
              >
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" icon="search" class="yellow_search_btn" @click="searchQuery">查询</a-button>
                <a-button icon="reload" class="clear_btn" @click="searchReset">清除条件</a-button>
                <a-button
                  type="danger"
                  :loading="ydLoading"
                  icon="arrow-right"
                  style="margin-left: 18px"
                  @click="handleToYD1()"
                  >转疑点</a-button
                >
                <a-button v-if="isBackButton" type="primary" style="margin-left: 8px" @click="backUppage">
                  返回
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 20px">
      <div slot="title">
        <a-tooltip overlayClassName="bgc_tooltip" placement="topRight">
          <template slot="title">
            <span>{{ DataModel.mxms }}</span>
          </template>
          <span style="font-weight: bold">{{ DataModel.modelName || '现金（大额）异常模型' }}</span>
        </a-tooltip>
        <a-icon type="strikethrough" @click.stop="showImg" />
      </div>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        row-key="id"
        :bordered="true"
        :loading="loading"
        class="antableClass"
        :pagination="ipagination"
        :row-selection="rowSelection"
        @change="handleTableChange"
      >
        <span slot="unitName" slot-scope="text">
          <j-ellipsis :value="text" :length="15" />
        </span>
        <span slot="accName" slot-scope="text">
          <j-ellipsis :value="text" :length="10" />
        </span>
        <span slot="summary" slot-scope="text">
          <j-ellipsis :value="text" :length="12" />
        </span>
        <template v-slot:docDate="text">
          <span>{{ text | TimerFormat }}</span>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleClickRow2(record)">关联</a>
          <a-divider type="vertical" />
          <a style="color: red" @click="handleToYD(record)">转疑点</a>
        </span>
      </a-table>
    </a-card>
    <CheckOrganModal ref="departModal" @ok="updateQueryParam" />
    <YDModel ref="YDModel" :router-data="$route.path" />
    <BusinessChart ref="businesschart" :flowimg="flowimg" />
    <ItemsOfIndicator ref="itemsofindicator" @save="editIndicator" />
    <CheckAndEditModel ref="modalForm" @ok="updateProList"></CheckAndEditModel>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction, postAction, deleteAction, putAction } from '@/api/manage'
import CheckOrganModal from '../../../sjxmzygl/yzzx/testcomponent/CheckOrganModal'
import ItemsOfIndicator from './ItemsOfIndicator.vue'
import BusinessChart from './BusinessChart'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from '@/views/sj/components/YDModel'
import jumpConfigMixin from '@/views/sj/sjxmzygl/sjxmss/jumpConfigMixin'
import columns from './columns'
import CheckAndEditModel from './ModalView/CheckAndEditModel'
export default {
  components: { CheckOrganModal, YDModel, BusinessChart, ItemsOfIndicator, CheckAndEditModel },
  mixins: [JeecgListMixin, base64toImg, jumpConfigMixin],
  data() {
    return {
      queryParam: {
        accName: '',
        unitId: '',
        startTime: '',
        endTime: '',
        arrayTime: [],
        extraFlag: false,
        direction: 0
      },
      isBackButton: false,
      superParam: {
        id: '868ad34d4afcb42369155794f7a5cf4a',
        modelId: '868ad34d4afcb42369155794f7a5cf4a'
      },
      modelData: [],
      url: {
        list: '/sjmx/queryXjdeInfo',
        model: '/dataModel/queryDataModelTemplateByExtra',
        indicator: '/sjmx/sjModelFieldConfig/queryModelField',
        editIndicator: '/sjmx/sjModelFieldConfig/edit',
        // 查询模型转疑点信息(多选)
        TurnSuspects: '/sjmx/queryModelMsgMulti'
      },
      rules: {
        accName: [{ required: true, message: '请选择账套/核算单元' }],
        arrayTime: [{ required: true, message: '请选择审计时间' }]
      },
      DataModel: {},
      columns: columns(),
      disableMixinCreated: true,
      flowimg: '',
      selectedRowKeys: []
    }
  },
  filters: {
    TimerFormat(time) {
      return time.indexOf(' ') ? time.split(' ')[0] : time
    }
  },
  computed: {
    // 行选择
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = [...selectedRowKeys]
          this.selectedRows = [...selectedRows]
        }
      }
    }
  },
  watch: {
    $route: {
      handler: function(to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          let { accName, unitId, startTime, endTime, direction, selectedRowKeys } = to.query
          this.queryParam = Object.assign(this.queryParam, {
            accName,
            unitId,
            startTime,
            endTime,
            direction,
            arrayTime: [startTime, endTime]
          })
          this.selectedRowKeys = selectedRowKeys.split(',')
          this.$nextTick(() => {
            this.loadData(1)
          })
        } else if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          let { accName, unitId } = to.params
          this.queryParam.accName = accName
          this.queryParam.unitId = unitId
          let { endDate, startDate } = JSON.parse(to.params.returnRecord)
          this.queryParam.endTime = endDate
          this.queryParam.startTime = startDate
          this.queryParam.arrayTime = [startDate, endDate]
          this.$nextTick(() => {
            this.searchQuery()
          })
          this.isBackButton = true
          this.returnRecord = to.params.returnRecord
        }
      },
      immediate: true
    }
  },
  created() {},
  methods: {
    handleClickRow2(record, index) {
      this.handleCheck(record, '凭证')
    },
    updateProList() {
      this.loadData(1)
    },
    searchReset() {
      this.queryParam = this.$options.data().queryParam
      this.dataSource = []
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    updateQueryParam(data, orgId) {
      let str1 = ''
      let str2 = ''
      let str3 = ''
      data.map(item => {
        // TODO 账套～～～
        str1 += item.unitId + ','
        str2 += item.accName + ','
        str3 += item.accCode + ','
      })
      if (str1.length > 0) {
        str1 = str1.substr(0, str1.length - 1)
      }
      if (str2.length > 0) {
        str2 = str2.substr(0, str2.length - 1)
      }
      if (str3.length > 0) {
        str3 = str3.substr(0, str3.length - 1)
      }
      this.queryParam.unitId = str1
      this.queryParam.extraId = str1
      this.queryParam.accCode = str3
      this.queryParam.accName = str2
      this.queryParam.orgId = orgId
    },
    searchQuery() {
      this.$refs.ruleForm.validate(value => {
        if (value) {
          this.loadData(1)
          this.getModelData()
          if (typeof this.getTop === 'function') {
            this.getTop()
          }
        }
      })
    },
    handleToYD(record) {
      if (this.dataSource.length) {
        const { startTime = '', endTime = '' } = this.queryParam
        let ydnr

        const time = `【${startTime}～${endTime}】【现金（大额）异常模型】`
        this.addYd(this.queryParam, ydnr, time)
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
    handleToYD1() {
      if (this.dataSource.length) {
        const { startTime = '', endTime = '' } = this.queryParam
        // let ydnr = `中铁XX局XX项目未取得增值税劳务发票X亿元，设计税金X万元；X公司城际联络线`
        let param = Object.assign({}, this.queryParam, {
          selectedRowKeys: this.selectedRowKeys.join(',')
        })
        let ydnr = undefined
        let gzzd = undefined
        const time = `【${startTime}～${endTime}】【现金（大额）异常模型】`
        let ydList = JSON.stringify(this.selectedRows)
        postAction(this.url.TurnSuspects, Object.assign({}, this.queryParam, this.superParam, { ydList: ydList })).then(
          res => {
            if (res.success) {
              if (res.result.length) {
                ydnr = res.result[0].ydms ? res.result[0].ydms : ydnr
                gzzd = res.result[0].gzzd ? res.result[0].gzzd : gzzd
              }
              this.addYdMulti(param, ydnr, time, gzzd)
            } else {
              this.$message.error(res.message)
            }
            if (res.code === 510) {
              this.$message.warning(res.message)
            }
          }
        )
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
    handleDatechange(dates) {
      this.queryParam.startTime = dates[0]
      this.queryParam.endTime = dates[1]
    },
    showImg() {
      if (Object.keys(this.DataModel).length != 0) {
        this.flowimg = `${window._CONFIG['domianURL']}/sys/common/static/${this.DataModel.mxUrl}`
        this.$refs.businesschart.show()
      } else this.$message.warning('请先配置查询条件')
    },
    getModelData() {
      var params = this.getQueryParams() // 查询条件
      this.loading = true
      getAction(this.url.model, params).then(res => {
        if (res.success) {
          this.DataModel = res.result[0]
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    // 展示模型筛选项信息
    ShowItemOfIndicator() {
      this.GetItemOfIndicator()
    },
    // 查询模型筛选项信息
    GetItemOfIndicator() {
      getAction(this.url.indicator, Object.assign({}, this.queryParam, this.superParam)).then(res => {
        if (res.success) {
          let projectItem = Object.assign({}, JSON.parse(res.result.projectJson))
          this.$refs.itemsofindicator.edit(projectItem)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    // 保存已经修改的projectJson(子组件返回json串)
    editIndicator(projectJson) {
      this.queryParam.projectJson = projectJson
      // this.queryParam.num = JSON.parse(projectJson).num
      //  console.log()
      putAction(this.url.editIndicator, Object.assign({}, this.queryParam, this.superParam)).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style lang="less">
.bgc_tooltip {
  .ant-tooltip-inner {
    // 这里是框框
    border-radius: 20px;
    color: #333;
    width: 400px;
    padding: 10px 15px;
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
  .ant-tooltip-arrow::before {
    // 这里是小三角形
    background-color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
@import '~@assets/less/tableTheme.less';
.img_css /deep/ .ant-card-body {
  padding-top: 7px;
}
/deep/ .ant-table-thead {
  tr {
    th {
      text-align: center !important;
    }
  }
}
.Exceed_funds_map {
  width: 100%;
  position: relative;
  .title {
    // width: 350px;
    height: 50px;
    text-align: center;
    margin: 0 auto;

    padding-top: 7px;
    span {
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      font-size: 22px;
      color: white;
      padding: 15px;
      background-color: rgb(1, 69, 142);
    }
  }
  .midline {
    margin: 0 auto;
    width: 100%;
    height: 40px;
    .line_v {
      margin: 0 auto;
      width: 4px;
      height: 100%;
      border-left: 4px dashed rgb(1, 69, 142);
    }
    .line_h {
      margin: 0 auto;
      width: 86%;
      border-bottom: 4px dashed rgb(1, 69, 142);
    }
  }
  .content_box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .content_item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .line_v {
        margin: 0 auto;
        height: 30px;
        width: 4px;
        border-left: 4px dashed rgb(1, 69, 142);
      }
      display: flex;
      justify-content: space-around;
      align-items: center;
      .step3_left_left {
        // flex-shrink:1;
        width: 200px;
        height: 80px;
        border: 2px solid black;
        font-size: 16px;
        font-weight: 700;
        color: white;
        text-align: center;
        p {
          background-color: rgb(1, 69, 142);
          height: 30px;
          padding-bottom: 10px !important;
        }
        span {
          color: rgb(1, 69, 142);
        }
      }
      .step3_left_left {
        margin-left: 10px;
      }
    }
  }
  .active {
    p {
      background-color: rgb(236, 149, 54) !important;
      height: 30px;
      padding-bottom: 10px !important;
    }
    span {
      color: orange !important;
    }
  }
}
</style>
